<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            display: flex;
            width: 800px;
        }

        .left {
            width: 200px;
            background-color: red;
        }

        .center {
            background-color: blue;
            word-break: break-word;
            flex-grow: 1;
            flex-basis: 0%;
            width: 200px;
            /* flex-basis: auto; */
        }

        .right {
            background-color: red;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 关于flex: 1;的解析看前端面经杂记部分 -->
    <div class="main">
        <div class="left">左</div>
        <div class="center">中
            <h2>flex布局实现三栏布局，直接父容器display:flex,左右盒子定宽，中间盒子flex-grow:1 && flex-basis: 0%</h2>
        </div>
        <div class="right">右</div>
    </div>
</body>

</html>